<template>
    <div>
            <h3 style="text-align: center">星座运势</h3>
        <router-link :to="{path:'/theZodiac',query:{consName:'%E7%99%BD%E7%BE%8A%E5%BA%A7'}}" tag="div" class="Nineandthreequarters">
            <div><img src="../assets/a8773912b31bb051f8193e4f0f33cdb44aed2e734a08.jpg" alt=""> <p>白羊座</p><div>3月21日-4月19日</div></div>
        </router-link>
        <router-link :to="{path:'/theZodiac',query:{consName:'%E9%87%91%E7%89%9B%E5%BA%A7'}}" tag="div" class="Nineandthreequarters">
                <div> <img src="../assets/金牛.jpg" alt=""><p>金牛座</p><div>4月20日-5月20日</div></div>
        </router-link>
        <router-link :to="{path:'/theZodiac',query:{consName:'%E5%8F%8C%E5%AD%90%E5%BA%A7'}}" tag="div" class="Nineandthreequarters">
                <div> <img src="../assets/双子.jpg" alt=""><p>双子座</p><div>5月21日-6月21日</div></div>
        </router-link>
        <router-link :to="{path:'/theZodiac',query:{consName:'%E5%B7%A8%E8%9F%B9%E5%BA%A7'}}" tag="div" class="Nineandthreequarters">
                <div> <img src="../assets/J.jpg" alt=""><p>巨蟹座</p><div>3月21日-4月19日</div></div>
        </router-link>
        <router-link :to="{path:'/theZodiac',query:{consName:'%E7%8B%AE%E5%AD%90%E5%BA%A7'}}" tag="div" class="Nineandthreequarters">
                <div> <img src="../assets/S.jpg" alt=""><p>狮子座</p><div>6月22日-7月22日</div></div>
        </router-link>
        <router-link :to="{path:'/theZodiac',query:{consName:'%E5%A4%84%E5%A5%B3%E5%BA%A7'}}" tag="div" class="Nineandthreequarters">
                <div> <img src="../assets/C.jpg" alt=""><p>处女座</p><div>8月23日-9月22日</div></div>
        </router-link>
        <router-link :to="{path:'/theZodiac',query:{consName:'%E5%A4%A9%E7%A7%A4%E5%BA%A7'}}" tag="div" class="Nineandthreequarters">
                <div> <img src="../assets/T.jpg" alt=""><p>天秤座</p><div>3月21日-4月19日</div></div>
        </router-link>
        <router-link :to="{path:'/theZodiac',query:{consName:'%E5%A4%A9%E8%9D%8E%E5%BA%A7'}}" tag="div" class="Nineandthreequarters">
                <div><img src="../assets/TX.jpg" alt=""><p>天蝎座</p><div>9月23日-10月23日</div> </div>
        </router-link>
        <router-link :to="{path:'/theZodiac',query:{consName:'%E5%B0%84%E6%89%8B%E5%BA%A7'}}" tag="div" class="Nineandthreequarters">
                <div> <img src="../assets/SS.jpg" alt=""><p>射手座</p><div>10月24日-11月22日</div></div>
        </router-link>
        <router-link :to="{path:'/theZodiac',query:{consName:'%E6%91%A9%E7%BE%AF%E5%BA%A7'}}" tag="div" class="Nineandthreequarters">
                <div> <img src="../assets/M.jpg" alt=""><p>摩羯座</p><div>11月23日-12月21日</div></div>
        </router-link>
        <router-link :to="{path:'/theZodiac',query:{consName:'%E6%B0%B4%E7%93%B6%E5%BA%A7'}}" tag="div" class="Nineandthreequarters">
                <div><img src="../assets/SP.jpg" alt=""><p>水平座</p><div>12月22日-1月19日</div></div>
        </router-link>
        <router-link :to="{path:'/theZodiac',query:{consName:'%E5%8F%8C%E9%B1%BC%E5%BA%A7'}}" tag="div" class="Nineandthreequarters">
                <div> <img src="../assets/SY.jpg" alt=""><p>双鱼座</p><div>2月19日-3月20日</div></div>
        </router-link>
    </div>
</template>

<script>
    export default {
        name: "epidemic",
        components:{
          // theZodiac
        },
        data(){
            return{
                value:  '',
                // list:[
                //     '白羊座','金牛座','双子座','巨蟹座','狮子座','处女座','天秤座','天蝎座','射手座','摩羯座','水瓶座','双鱼座'
                // ],
            }
        },
        // methods:{
        //         change(){
        //             console.log(this.value)
        //         }
        // },
        // created() {
        //     constellation().then(res=>{
        //         console.log(res)
        //         this.list=res;
        //             })
        // },
        // mounted(){
        //     constellation(this.value).then(res=>{
        //         console.log(res)
        //     })
        // },
    }
</script>

<style scoped>
.Nineandthreequarters{
        padding: 2%;
        position: relative;
        border-bottom: silver 1px solid ;
}
.Nineandthreequarters:last-child{
        border-bottom: none;
        margin-bottom: 10%;
}

.Nineandthreequarters p{
        position: absolute;
        top: 15%;
        left: 44%;
}
.Nineandthreequarters>div>div{
        position: absolute;
        top: 50%;
        left: 44%;
}
.Nineandthreequarters img{
        width: 30%;
        margin-left: 4%;
}
</style>